<template>
  <div>
    <ElCard class="box-card">
    <ElForm :inline="true" :model="formInline" class="demo-form-inline">
      <ElFormItem label="一级分类">
        <ElSelect v-model="category1ID" placeholder="请选择" :disabled="!disabledSelector" >
          <ElOption
            v-for="c1 in categoryStoreData.category1ListData"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="二级分类">
        <ElSelect v-model="category2Id" placeholder="请选择" :disabled="!disabledSelector"  >
          <ElOption
            v-for="c2 in category2List"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="三级分类">
        <ElSelect v-model="category3Id" @change="receiveID3" :disabled="!disabledSelector" placeholder="请选择">
          <ElOption
            v-for="c3 in category3List"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          />
          
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </ElCard>
  </div>

</template>

<script lang="ts">
export default {
  name: "CategorySelector",
};
</script>

<script setup lang="ts">
import { reactive, onMounted, computed, ref, } from "vue";

import type { CategorySelectModel } from "@/api/product/model/categorySelect";
import {useCategoryListStore} from "@/stores/categoryList"
//定义复杂数据类型reactive
defineProps(['disabledSelector'])
const formInline = reactive({
  user: "",
  region: "",
});
//使用pinia仓库中得分类数据
const categoryStoreData = useCategoryListStore()
//定义一级分类ID
const category1ID = computed<number>({
  get(){
    return categoryStoreData.Category1ID as number ;
  },
  async set(val){
    categoryStoreData.setCategory2List(val)
  }
})

const category2Id=ref('')
let category3Id=ref('')

const category1List = ref<CategorySelectModel>([]);


//页面挂载发送请求
onMounted( () => {
  categoryStoreData.getCategory1ListData()
  
  // console.log("[hmz]", formInline.res);
  

});

const onSubmit = () => {
  console.log("submit!");
};

</script>

<style></style>
